<template>
  <div class="home">
    <div class="home_body w1200">
      <div class="home_part1">
        <div class="left">
          <swiper :options="swiperOption">
            <swiper-slide
              class="swiper-slide-l"
              v-for="(item, index) in carouselArr"
              :key="index"
            >
              <div class="relative" @click="nativeDetailUrl(item)">
                <img
                  :src="http + item.imagepath"
                  class="img2 img2_lunbu1"
                />
                <div class="text shengluehao" v-if="item.title">
                  {{ item.title.substring(0, 26) }} ...
                </div>
              </div>
            </swiper-slide>
            <!-- 分页器 -->
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
        <div class="right">
          <div class="part1_1">
            <swiper :options="swiperOption2">
              <swiper-slide
                class="swiper-slide-l"
                v-for="(item, index) in carouselArr2"
                :key="index"
              >
                <div @click="nativeDetail(item)">
                  <div class="pt1_1_title shengluehao">
                    {{ item.title }}
                  </div>
                  <div class="pt1_1_text" v-if="item.desc">
                    {{ item.desc.substring(0, 80) }}...
                  </div>
                </div>
              </swiper-slide>
              <!-- 分页器 -->
              <div class="swiper-pagination" slot="pagination"></div>
              <div class="swiper-button-prev" slot="button-prev"></div>
              <div class="swiper-button-next" slot="button-next"></div>
            </swiper>
          </div>
          <div class="part1_2">
            <!-- <TabCom1
              icon="icon-shuangyoujiantou"
              iconColor="#f00"
              :navList="part1_2"
              :dataList="part1_2list"
              :sel="partSel0"
              @changeSel="changeSel0"
              @nativeTo="nativeTo"
            ></TabCom1> -->

            <!-- 第一行右 -->
            <div class="tab_class1_sy">
              <div class="tab_ul">
                <div
                  class="tab_li"
                  :class="index == partSel0 ? 'active' : ''"
                  v-for="(item, index) in part1_2"
                  :key="index"
                  @mouseover="changeSel0(index)"
                >
                  {{ item.title }}
                </div>
              </div>
              <div class="tab_body">
                <div class="hang" v-for="(item, index) in part1_2list" :key="index" @click.stop="nativeDetail(item)">
                  <div class="tab_left shengluehao">
                    <div
                      class="iconfont icon-shuangyoujiantou"
                      :style="{ color: '#f00' }"
                    ></div>
                    <div class="shengluehao">{{ item.title }}</div>
                  </div>
                  <div class="tab_right">{{ item.time.split(" ")[0] }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="home_part2">
        <div class="left590">
          <!-- <TabCom2
            icon="icon-shuangyoujiantou"
            iconColor="#1178c1"
            :navList="part1_2"
            :dataList="part1_2list"
            :sel="partSel1"
            @changeSel="changeSel1"
            @nativeTo="nativeTo"
          ></TabCom2> -->

          <!-- //第二行左 -->
          <div class="tab_class2_sy">
            <div class="tab_ul">
              <div
                class="tab_li"
                :class="index == partSel1 ? 'active' : ''"
                v-for="(item, index) in part1_3"
                :key="index"
                @mouseover="changeSel1(index)"
              >
                {{ item.title }}
              </div>
            </div>
            <div class="tab_body">
              <div class="hang" v-for="(item, index) in part1_3list" :key="index"  @click.stop="nativeDetail(item)">
                <div class="tab_left shengluehao">
                  <div
                    class="iconfont  icon-shuangyoujiantou"
                    :style="{ color: '#1178c1' }"
                  ></div>
                  <div class="shengluehao">{{ item.title }}</div>
                </div>
                <!-- <div class="tab_right">{{ item.time }}</div> -->
              </div>
            </div>
          </div>
          
        </div>
        <div class="right590">
          <!-- //第二行右 -->
          <div class="tab_class2_sy">
            <div class="tab_ul">
              <div
                class="tab_li"
                :class="index == partSel2 ? 'active' : ''"
                v-for="(item, index) in part1_4"
                :key="index"
                @mouseover="changeSel2(index)"
              >
                {{ item.title }}
              </div>
            </div>
            <div class="tab_body">
              <div class="hang" v-for="(item, index) in part1_4list" :key="index"  @click.stop="nativeDetail(item)">
                <div class="tab_left shengluehao">
                  <div
                    class="iconfont  icon-shuangyoujiantou"
                    :style="{ color: '#1178c1' }"
                  ></div>
                  <div class="shengluehao">{{ item.title }}</div>
                </div>
                <!-- <div class="tab_right">{{ item.time }}</div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="home_part3">
        <img :src="http+publicInfo.gongzhonghaoimg" alt="" class="home_center_img" />
      </div>
      <div class="home_part2">
        <div class="left590">
          <!-- <TabCom2
            icon="icon-shuangyoujiantou"
            iconColor="#1178c1"
            :navList="part1_2"
            :dataList="part1_2list"
            :sel="partSel3"
            @changeSel="changeSel3"
            @nativeTo="nativeTo"
          ></TabCom2> -->
          <!-- //第三行左 -->
          <div class="tab_class2_sy">
            <div class="tab_ul">
              <div
                class="tab_li"
                :class="index == partSel3 ? 'active' : ''"
                v-for="(item, index) in part1_5"
                :key="index"
                @mouseover="changeSel3(index)"
              >
                {{ item.title }}
              </div>
            </div>
            <div class="tab_body">
              <div class="hang" v-for="(item, index) in part1_5list" :key="index"  @click.stop="nativeDetail(item)">
                <div class="tab_left shengluehao">
                  <div
                    class="iconfont  icon-shuangyoujiantou"
                    :style="{ color: '#1178c1' }"
                  ></div>
                  <div class="shengluehao">{{ item.title }}</div>
                </div>
                <!-- <div class="tab_right">{{ item.time }}</div> -->
              </div>
            </div>
          </div>
        </div>
        <div class="right590">
          <div class="tab_class2_sy">
            <div class="tab_ul">
              <div
                class="tab_li"
                :class="index == partSel4 ? 'active' : ''"
                v-for="(item, index) in part1_6"
                :key="index"
                @mouseover="changeSel4(index)"
              >
                {{ item.title }}
              </div>
            </div>
            <div class="tab_body">
              <div class="hang" v-for="(item, index) in part1_6list" :key="index"  @click.stop="nativeDetailQy(item)">
                <div class="tab_left shengluehao">
                  <div
                    class="iconfont  icon-shuangyoujiantou"
                    :style="{ color: '#1178c1' }"
                  ></div>
                  <div class="shengluehao">{{ item.title }}</div>
                </div>
                <!-- <div class="tab_right">{{ item.time }}</div> -->
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="home_part5">
        <div class="part5_title_sy">
          <div class="part5left">
            <div class="tuijian">推荐企业</div>
            <!-- <div>(已收录{{publicInfo.companynumtotal}}家企业)</div> -->
          </div>
          <div class="part5right" @click="nativeToHY">更多 》</div>
        </div>
        <div class="part5_body">
          <div
            class="img2_box"
            v-for="(item, index) in carouselArr3"
            :key="index"
            @click="nativeToHezuo(item)"
          >
            <img
              class="img2"
              :src="http + item.weblogo"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import TabCom1 from "@components/tabCom1";
import TabCom2 from "@components/tabCom2";
import _ from 'lodash';
import { Message } from 'element-ui';
export default {
  name: "home",
  components: {
    TabCom1,
    TabCom2,
  },
  data() {
    return {
      carouselArr3: [],
      part1_2: [],
      part1_3: [],
      part1_4: [],
      part1_5: [],

      part1_2list: [],
      part1_3list: [],
      part1_4list: [],
      part1_5list: [],
      part1_6list: [],
      part1_6: [
        { title: "最新入驻" },
        { title: "企业动态" },
        // { title: "人才招聘" },
        // { title: "遗失声明" },
      ],
      partSel0: 0,
      partSel1: 0,
      partSel2: 0,
      partSel3: 0,
      partSel4: 0,
      partSel5: 0,
      carouselArr: [ ],
      carouselArr2: [],
      swiperOption: {
        //显示分页
        pagination: {
          el: ".swiper-pagination",
        },
        autoplay: 6000,
        loop: true,
      },
      swiperOption2: {
        //显示分页
        pagination: ".swiper-pagination",
        direction: "vertical",
        autoplay: 5000,
        // //开启循环模式
        loop: true,
        prevButton: ".swiper-button-next",
        nextButton: ".swiper-button-prev",
        paginationType: "fraction",
        // navigation: {
        //   nextEl: '.swiper-button-next',
        //   prevEl: '.swiper-button-prev',
        // },
      },
      publicInfo:{},
      http:"",
      gongRightList:[],
      ListPart1:[], //第一行 右
      icon:"",
      allListTab:[],
    };
  },
  mounted() {
   
    this.$getApi("/common/tuijiancompanylist", {showall:0}).then((res) => {
      console.log(res,"-----------tuijia");
      
      this.carouselArr3 = res.data.tuilist;  //推荐

    }); 
    this.$getApi("/common/companylist",{}).then(res=>{
      let resData = res.data;
      let resBefore = []
      _.map(resData,item=>{
        resBefore.push({
          cid:item.id,
          title:item.webtitle
        })
      })
      console.log(resData,"第三行右")
      this.part1_6list = resBefore
    })
    this.$getApi("/common/qiyeyejizsxq",{}).then(res=>{
      let resData = res.data;
      console.log(resData,"第三行右2")
    })
    
    this.$getApi("/common/config",{}).then(res=>{
      let resData = res.data;
      console.log(resData,"备用公用")
       this.http = this.$apiUrl;
      this.publicInfo =  res.data;
    })
    this.$getApi("/common/companylist", {key:this.biaotiInput}).then((res) => {
      console.log(res);
      this.gongRightList = res.data;

 
    });
    this.$getApi("/common/homeitem", {key:this.biaotiInput}).then((res) => {
      console.log(res.data,"所有tab");
      this.allListTab = res.data.list;
      this.part1_2 = this.allListTab[0]
      this.getTabListDetali(this.part1_2[0].id,"part1_2")
      this.part1_3 = this.allListTab[1]
      this.getTabListDetali(this.part1_3[0].id,"part1_3")
      this.part1_4 = this.allListTab[2]
      this.getTabListDetali(this.part1_4[0].id,"part1_4")
      this.part1_5 = this.allListTab[3]
      this.getTabListDetali(this.part1_5[0].id,"part1_5")
 
    });

    this.$getApi("/common/home", {key:this.biaotiInput}).then((res) => {
      console.log(res.data,'首页内容');
      let dataL = res.data;
      this.carouselArr = dataL.slidelist
      this.carouselArr2 = dataL.articlelist
      // this.lunboList = dataL.slidelist
      // this.ListPart1 = dataL.data.slice(0,9)
      
      // let part1_2 = [];
      // _.map(this.ListPart1,item=>{
      //   part1_2.push({
      //     title:""
      //   })
      // })
      // console.log(part1_2)
      // this.part1_2
 
    });
  },
  methods: {
    getTabListDetali(id,type){
      let listD = "";
      let sclitN = 0;
      if(type == "part1_2"){
        listD = "part1_2list";
        sclitN = 9
      }
      if(type == "part1_3"){
        listD = "part1_3list";
        sclitN = 6
      }
      if(type == "part1_4"){
        listD = "part1_4list";
        sclitN = 6
      }
      if(type == "part1_5"){
        listD = "part1_5list";
        sclitN = 6
      }
      this.$getApi("/common/articlelist", {id:id}).then((res) => {
        console.log(res,"详情");
        this[listD] = res.data.slice(0,sclitN)
      });
    },
    nativeDetail(item){
      console.log(item)
      this.$router.push({ path: "/detail", query: { sel: 0,parentId:item.id,type:1,from:'home' } });
    },
    nativeDetailQy(item,){
      if(this.partSel4 == 0 ){
        this.$router.push({ path: "/hezuo", query: { sel: 0,id:item.cid,type:1 } });
      }
      if(this.partSel4 == 1 ){
        this.$router.push({ path: "/hezuo", query: { sel: 2,id:item.cid,type:2,cid:item.id,from:"home" } });
      }
    },
    nativeDetailUrl(item){
      console.log(item)
      if(item.url){
        let urlC = item.url.indexOf("http") < 0 ? "http://"+item.url : item.url
        window.open(urlC)
      }else{
        Message({  //用户被删除
            type: "error",
            message: "没有链接内容",
            showClose: true
        });
      }
      
    },
    changeSel0(index) {
      this.partSel0 = index;
      this.getTabListDetali(this.part1_2[index].id,"part1_2")
    },
    changeSel1(index) {
      this.partSel1 = index;
      this.getTabListDetali(this.part1_3[index].id,"part1_3")
    },
    changeSel2(index) {
      this.partSel2 = index;
      this.getTabListDetali(this.part1_4[index].id,"part1_4")
    },
    changeSel3(index) {
      this.partSel3 = index;
      this.getTabListDetali(this.part1_5[index].id,"part1_5")
    },
    changeSel4(index) {
      this.partSel4 = index;
      console.log(index)
      if(index == 0){
        this.$getApi("/common/companylist",{}).then(res=>{
          let resData = res.data;
          let resBefore = []
          _.map(resData,item=>{
            resBefore.push({
              cid:item.id,
              title:item.webtitle
            })
          })
          console.log(resData,"第三行右")
          this.part1_6list = resBefore
        })
      }
      if(index == 1){
        this.$getApi("/common/fenzhanqiyedongtai",{}).then(res=>{
          let resData = res.data;
          console.log(resData,"第三行右2")
          this.part1_6list = resData
        })
      }
    },
    nativeTo(){
      this.$router.push({ path: "/detail", query: { sel: 0 } });
    },
    nativeToHY(){
      this.$router.push({ path: "/huangye" });
      //  // 推荐
      // this.$getApi("/common/companylist", {key:this.biaotiInput}).then((res) => {
      //   console.log(res,"------------------");
      //   this.carouselArr3 = res.data;
  
      // });
    },
    nativeToHezuo(item){
      console.log(item)
      this.$router.push({ path: "/hezuo", query: { sel: 0,id:item.id } });
    }
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.home_part5 {
  .part5_body {
    display: flex;
    flex-wrap: wrap;
    width: 1200px;
    padding-bottom 20px;
    .img2_box {
      margin: 12px 1% 0 0;
      box-shadow: 1px 1px 4px #ccc;
      width: 19%;
      cursor: pointer;
      
      .img2 {
        width: 100%;
        height: 86px;
      }
    }
  }
}

.part5_title_sy {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #184d7b;
  background-color: #e1e1e1;
  padding-right: 20px;
  margin-top: 16px;
  box-shadow: 1px 1px 4px #e1e1e1;

  .part5left {
    display: inline-flex;
    align-items: center;

    .tuijian {
      height: 36px;
      line-height: 36px;
      width: 120px;
      text-align: center;
      // background-color: #fff;
      color: #184d7b;
      margin-right: 0px;
      font-size :16px
    }
  }

  .part5right:hover {
    color: #2172ce;
    cursor: pointer;
  }
}

.home_part3 {
  padding: 10px 0 0;
}

.home_part2 {
  justify-content: space-between;
  display: flex;
  padding-top: 16px;

  .left590 {
    width: 590px;
  }

  .right590 {
    width: 590px;
  }
}
.home_center_img{
  width 100%
}
.home_part1 {
  padding-top: 16px;
  justify-content: space-between;
  display: flex;

  .left {
    width: 590px;
    height: 410px;

    .swiper-container {
      width: 590px;
      height: 410px;

      .swiper-wrapper {
        .swiper-slide {
          width: 100%;
          height: 100%;
          background-color: #42b983;
        }
      }

      .swiper-pagination {
        background-color: #007CE0;
        width: 7px;
        height: 7px;
        bottom: 20px;
        right: 10px;
      }
    }

    .relative {
      position: relative;

      .text {
        width: 100%;
        height: 50px;
        line-height: 50px;
        position: absolute;
        z-index: 1;
        left: 0px;
        bottom: 0px;
        background-color: rgba(0, 0, 0, 0.6);
        font-size: 14px;
        color: #fff;
        padding-left: 14px;
        box-sizing: border-box;
      }
    }
  }

  .right {
    width: 590px;

    .part1_1 {
      height: 90px;

      .pt1_1_title {
        width: 500px;
        font-size: 22px;
      }

      .pt1_1_text {
        padding: 4px 0 6px;
      }

      .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
        background-size: 6px 10px;
        background-color: #e1e1e1;
        width: 20px;
        height: 20px;
        top: 30%;
        right: 10px;
        border-radius: 4px;
      }

      .swiper-button-prev, .swiper-container-rtl .swiper-button-next {
        background-size: 6px 10px;
        background-color: #e1e1e1;
        width: 20px;
        height: 20px;
        top: 30%;
        right: 62px;
        left: initial;
        border-radius: 4px;
      }

      .swiper-container {
        width: 590px;
        height: 80px;

        .swiper-wrapper {
          .swiper-slide {
            width: 100%;
            height: 100%;
            // background-color: #42b983;
          }
        }

        .swiper-pagination {
          // background-color: #007CE0;
          width: 30px;
          height: 20px;
          top: 30%;
          margin-top: -22px;
          right: 30px;
          left: initial;
        }
      }
    }
  }
}

.img2_lunbu1{
  width: 590px;
  height: 410px;
}
///第一行 右
.tab_class1_sy {
  width: 100%;

  .tab_ul {
    display: flex;
    background-color: #edf1fa;
    height: 35px;
    border-bottom: 2px solid #1178c1;

    .tab_li {
      width: 78px;
      height: 35px;
      line-height: 35px;
      font-size: 15px;
      text-align: center;
      cursor: pointer;

      &.active {
        background-color: #1178c1;
        color: #fff;
      }
    }
  }

  .tab_body {
    .hang {
      display: flex;
      padding-top: 9px;
      font-size: 15px;
      cursor: pointer;

      .iconfont {
        font-size: 12px;
        padding-right: 4px;
      }

      .tab_left {
        flex: 1;
        display: inline-flex;
        align-items: center;
        width: 90%;
      }

      .tab_right {
        color: #999;
      }
    }
  }
}
// 第二行列表
.tab_class2_sy {
  width: 100%;

  .tab_ul {
    display: flex;
    background-color: #edf1fa;
    height: 35px;
    padding-left 1px;
    

    .tab_li {
      width: 78px;
      height: 35px;
      line-height: 35px;
      font-size: 15px;
      text-align: center;
      cursor: pointer;
      border-top 2px solid transparent;
      &.active {
        background-color:#fff ;
        color: #1178c1;
        border-top 2px solid #1178c1;
      }
    }
  }

  .tab_body {
    padding-top:6px;
    .hang {
      display: flex;
      padding: 4px 0;
      font-size: 15px;
      cursor: pointer;
      border-bottom 1px solid #f0f0f0;
      .iconfont {
        font-size: 12px;
        padding-right: 4px;
      }

      .tab_left {
        // flex: 1;
        display: inline-flex;
        align-items: center;
        width: 90%;
      }

      .tab_right {
        color: #999;
      }
    }
  }
}
</style>
